<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <h3 class="h3-pama0">{{$t('newSearchResult.Survey.overallSatisfaction')}}</h3>
          <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
          <div id="overallSatisfaction" style="width: 100%; height:30vh;" v-loading=""></div>
          <!--以上是日提示框内容-->
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <h3 class="h3-pama0">{{$t('newSearchResult.Survey.productSatisfaction')}}</h3>
          <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
          <div id="productSatisfaction" style="width: 100%; height:30vh;" v-loading=""></div>
          <!--以上是日提示框内容-->
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px; margin-bottom: 20px;">
      <el-col :span="12">
        <el-card>
          <h3 class="h3-pama0">{{$t('newSearchResult.Survey.serviceSatisfaction')}}</h3>
          <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
          <div id="serviceSatisfaction" style="width: 100%; height:30vh;" v-loading=""></div>
          <!--以上是日提示框内容-->
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <h3 class="h3-pama0">{{$t('newSearchResult.Survey.otherSatisfaction')}}</h3>
          <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
          <div id="otherSatisfaction" style="width: 100%; height:30vh;" v-loading=""></div>
          <!--以上是日提示框内容-->
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {getUsername} from "../../../../utils/auth";
  import {mapGetters} from 'vuex'

  export default {
    props: ['bus', 'countrys', 'fisyears', 'geos', 'regions', 'show'],
    data() {
      return {
        DomCharts: {
          overallSatisfaction: '',
          productSatisfaction: '',
          serviceSatisfaction: '',
          otherSatisfaction: ''
        },
        echartsData: {
          overallEchartData: [],
          productEchartData: [],
          serviceEchartData: [],
          otherEchartData: [],
        },
        optionColors: ['#0090e9', '#6be6c1', '#59c4e6', '#ffb980', '#b692df'],
        errorInfo: {
//          color: '#fff',
//          text: 'NO DATA',
//          textColor: '#000',
//          maskColor: '#fff'
          text: 'No Data',
          color: '#fff',
          textColor: '#959595',
          maskColor: 'rgb(255, 255, 255)',
          zlevel: 0
        },
      }
    },
    computed: {
      ...mapGetters([
        'sidebar'
      ]),
      postData() {
        return {
          // geos: this.geos,
          // fisyears: this.fisyears,
          // countrys: this.countrys,
          customer_name: this.$route.query.resultTitle,
          username: getUsername()
        }
      }
    },
    methods: {
      initEchartsDom() {
        this.DomCharts.overallSatisfaction = this.echarts.init(document.getElementById('overallSatisfaction'), null, {renderer: 'canvas'})
        this.DomCharts.productSatisfaction = this.echarts.init(document.getElementById('productSatisfaction'), null, {renderer: 'canvas'})
        this.DomCharts.serviceSatisfaction = this.echarts.init(document.getElementById('serviceSatisfaction'), null, {renderer: 'canvas'})
        this.DomCharts.otherSatisfaction = this.echarts.init(document.getElementById('otherSatisfaction'), null, {renderer: 'canvas'})
      },
      showOverallEcharts() {
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            type: 'category',
            data: this.echartsData.overallEchartData.name,
            axisLabel: {
              interval: 0,
              // rotate: 40,
              color: '#959eaf'
            },
            axisLine: {
              lineStyle: {
                color: '#959eaf'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#959eaf'
              }
            },
            axisLabel: {
              interval: 0,
              color: '#959eaf',
              fontSize: 12
            },
          },
          series: [{
            data: this.echartsData.overallEchartData.bar.value,
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#5ab1ef'
              }
            },
            barWidth: 30
          }]
        }
        this.DomCharts.overallSatisfaction.setOption(option)
      },
      showProductEcharts() {
        let option = {
          color: this.optionColors,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            textStyle: {
              align: 'left',
              color: '#7588E4'
            },
            backgroundColor: 'rgba(255,255,255,1)',
            padding: [5, 10],
            extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
          },
          legend: {
            data: this.echartsData.productEchartData.lin.value.map(item => item.name),
            itemWidth: 15,
            itemHeight: 15
          },
          grid: {
            left: 20,
            right: 20,
            // bottom: '3%',
            containLabel: true
          },
          yAxis: {
            type: 'value',
            name: '(score)',
            boundaryGap: [0, 0.01],
            axisLabel: {
              color: '#959eaf',
              fontFamily: 'Helvetica',
              // textStyle: {
              //   fontSize: 10 // 让字体变大
              // }
            },
            axisLine: {
              lineStyle: {
                color: '#959eaf'
              }
            }
          },
          xAxis: {
            type: 'category',
            data: this.echartsData.productEchartData.name,
            axisLabel: {
              color: '#959eaf',
              fontFamily: 'Helvetica',
              // textStyle: {
              //   fontSize: 10 // 让字体变大
              // }
            },
            axisLine: {
              lineStyle: {
                color: '#959eaf'
              }
            }
          },
          series: this.echartsData.productEchartData.lin.value.map(item => {
            return {
              name: item.name,
              type: 'bar',
              barGap: 0,
              data: item.value
            }
          }),
        }
        this.DomCharts.productSatisfaction.setOption(option)
      },
      showServiceEcharts() {
        let legendArr = this.echartsData.serviceEchartData.name
        let indicatorData = this.echartsData.serviceEchartData.lin.value.map(item => {
          return {name: item.name}
        })
        let seriesData = []
        for (let i = 0; i < this.echartsData.serviceEchartData.name.length; i++) {
          seriesData.push({
            name: this.echartsData.serviceEchartData.name[i],
            value: this.echartsData.serviceEchartData.lin.value.map(item => item.value[i])
          })
        }
        let option = {
          title: {
            subtext: '(score)'
          },
          color: this.optionColors,
          tooltip: {
            confine: true,
            textStyle: {
              align: 'left',
              color: '#7588E4'
            },
            backgroundColor: 'rgba(255,255,255,1)',
            padding: [5, 10],
            extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
          },
          legend: {
            data: legendArr,
            itemWidth: 15,
            itemHeight: 15
          },
          grid: {
            left: 0,
            right: 0,
            bottom: '3%',
            containLabel: true
          },
          radar: {
            // shape: 'circle',
            name: {
              textStyle: {
                // color: '#fff',
                // backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
              }
            },
            indicator: indicatorData,
            radius: '50%',
            // splitNumber: 2
          },
          series: [{
            name: '名称',
            type: 'radar',
            // areaStyle: {normal: {}},
            data: seriesData
          }]
        }
        this.DomCharts.serviceSatisfaction.setOption(option)
      },
      showOtherEcharts() {
        let legendArr = this.echartsData.otherEchartData.name
        let indicatorData = this.echartsData.otherEchartData.lin.value.map(item => {
          return {name: item.name}
        })
        let seriesData = []
        for (let i = 0; i < this.echartsData.otherEchartData.name.length; i++) {
          seriesData.push({
            name: this.echartsData.otherEchartData.name[i],
            value: this.echartsData.otherEchartData.lin.value.map(item => item.value[i])
          })
        }
        let option = {
          title: {
            subtext: '(score)'
          },
          color: this.optionColors,
          tooltip: {
            confine: true,
            textStyle: {
              align: 'left',
              color: '#7588E4'
            },
            backgroundColor: 'rgba(255,255,255,1)',
            padding: [5, 10],
            extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
          },
          legend: {
            data: legendArr,
            itemWidth: 15,
            itemHeight: 15
          },
          grid: {
            left: 0,
            right: 0,
            bottom: '3%',
            containLabel: true
          },
          radar: {
            // shape: 'circle',
            name: {
              textStyle: {
                // color: '#fff',
                // backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
              }
            },
            indicator: indicatorData,
            radius: '50%',
            // splitNumber: 2
          },
          series: [{
            name: '名称',
            type: 'radar',
            // areaStyle: {normal: {}},
            data: seriesData
          }]
        }
        this.DomCharts.otherSatisfaction.setOption(option)
      },
      chartsResize() {
        const _this = this
        setTimeout(function () {
          _this.DomCharts.overallSatisfaction.resize()
          _this.DomCharts.productSatisfaction.resize()
          _this.DomCharts.serviceSatisfaction.resize()
          _this.DomCharts.otherSatisfaction.resize()
        }, 200)
      },
      loadEchartsData() {
        this.loadOverallData()
        this.loadProductData()
        this.loadServiceData()
        this.loadOtherData()
      },
      async loadOverallData() {
        const _this = this
        let res = await this.axios.post('customerSurvey/overallSatisfaction.do', this.postData)
        let resData = res.data.data
        this.echartsData.overallEchartData = resData
        if (resData.name.length !== 0) {
          this.showOverallEcharts()
        } else {
          this.DomCharts.overallSatisfaction.clear()
          this.DomCharts.overallSatisfaction.showLoading('default', _this.errorInfo)
        }
      },
      async loadProductData() {
        let res = await this.axios.post('customerSurvey/productSatisfaction.do', this.postData)
        let resData = res.data.data
        this.echartsData.productEchartData = resData
        this.showProductEcharts()
      },
      async loadServiceData() {
        let res = await this.axios.post('customerSurvey/serviceSatisfaction.do', this.postData)
        let resData = res.data.data
        this.echartsData.serviceEchartData = resData
        this.showServiceEcharts()
      },
      async loadOtherData() {
        let res = await this.axios.post('/customerSurvey/otherSatisfaction.do', this.postData)
        let resData = res.data.data
        this.echartsData.otherEchartData = resData
        this.showOtherEcharts()
      },
    },
    watch: {
      // 'sidebar.opened': function () {
      //   this.chartsResize()
      // },
      // show() {
      //   this.chartsResize()
      // }
    },
    mounted() {
      const _this = this;
      this.initEchartsDom()
      this.loadEchartsData()
      // window.onresize = function () {
      //   _this.chartsResize()
      // }
    }
  }
</script>
<style scoped lang="scss">
  .h3-pama0 {
    margin: 0 0 20px 10px;
    padding: 0;
    /*font-size: 18px;*/
    font: bold 16px;
    color: #666;
  }
</style>
